<template>
  <div class="newsDetail">
    <Header></Header>
    <Breadcrumb :breadcrumb="breadcrumb" @onClick="onClick"></Breadcrumb>
    <div class="newsDetail__content">
      <div class="newsDetail__content__title">{{ newsDetail.title }}</div>
      <div class="newsDetail__content__time">日期：{{ newsDetail.create_time_text }}</div>
      <div class="newsDetail__content__text" v-html="newsDetail.content"></div>
    </div>
    <Footer></Footer>
    <Services></Services>
  </div>
</template>
<script>
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";
import Services from "../../components/Services.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
export default {
  name: 'newsDetail',
  components: { Header, Footer, Services, Breadcrumb },
  data() {
    return {
      breadcrumb: [
        { name: '首页', type: '/' },
        { name: '新闻动态', type: '/news' },
        { name: '新闻详情', type: '/newsDetail' },
      ],
      newsDetail: {},
    }
  },
  created() {},
  mounted() {
    const id = this.$route.query.id;
    console.log(id, 'iiiiddeeeeee')
    this.getNewsDetail(id);
  },
  methods: {
    onClick() {
      console.log('点击了面包屑')
    },
    async getNewsDetail(id) {
      const res = await this.$request.get(`api/article/detail?id=${id}`);
      console.log(res, 'res===');
      if (res.code == 1) {
        this.newsDetail = res.data || {};
      }
    }
  },
}
</script>
<style lang="less" scoped>
.newsDetail {
  &__content {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    &__title {
        font-weight: 500;
        font-size: 40px;
        color: #1D2538;
    }
    &__time {
        font-weight: 400;
        font-size: 16px;
        color: #6F737B;
        margin-bottom: 20px;
    }
    &__text {
        text-align: left;
        font-size: 14px;
        color: #6F737B;
        line-height: 28px;
    }
  }
}
</style>